<template>
<view class="view-box">
	<view class="item" @click="handleClick('宠物')">
		<image class="icon" src="../static/icons/pet.png"></image>
		<text class="title">宠物</text>
	</view>
	<view class="item" @click="handleClick('宠物周边')">
		<image class="icon" src="../static/icons/petclose.png"></image>
		<text class="title">宠物周边</text>
	</view>
	<view class="item" @click="handleClick('nearbyStorePage')">
		<image class="icon" src="../static/icons/store.png"></image>
		<text class="title">附近门店</text>
	</view>
</view>
</template>

<script>
export default {
	name: "sort",
	data() {
		return {

		};
	},
	created() {
		this.getAddress()
	},
	methods: {
			handleClick(pageName) {
				switch (pageName) {
					case '宠物':
					    uni.setStorageSync('categoryName', '宠物');
						uni.switchTab({ url: '/pages/sort/sort' ,
						});
						break;
					case '宠物周边':
					    uni.setStorageSync('categoryName', '宠物周边');
						uni.switchTab({ url: '/pages/sort/sort',
						 });
						break;
					case 'nearbyStorePage':
						uni.navigateTo({ url: '/pages/nearbyStores/nearbyStores' });
						break;
					default:
						  uni.showToast({
						  	title: '点击错误',
						  	duration: 2000
						  }) 
				}
			},
			//获取当前经纬度
			getAddress() {
				uni.getLocation({
					type: 'wgs84',
				success: res => {
					uni.setStorageSync('latitude', res.latitude);
					uni.setStorageSync('longitude', res.longitude);
					}
				});
				},
		}
}
</script>

<style scoped>
.view-box {
	display: flex;
	justify-content: space-around; /* 让 item 们平均分布在容器中 */
	align-items: center;
	background-color: #fff;
	flex-wrap: wrap; /* 如果有更多 item 超出一行，它们会换行 */
	background-color: #dea01f;
}

.item {
	display: flex; /* 这个容器需要 flex */
	flex-direction: column; /* 列方向，使图片和文字垂直排列 */
	align-items: center; /* 文字和图片水平居中 */
	margin: 40rpx; /* 可以添加一点 margin 来让 item 之间有间隔 */
}

.icon {
	width: 20vw;
	height: 20vw;
	border-radius: 40rpx; /* 添加圆角效果，数值可以根据需要调整 */
}

.title {
	margin-top: 10rpx;
	font-size: 30rpx;
}
</style>